<!-- 12.15 董事长力荐，好货快快抢点击更多跳转 -->
<template>
	<view>
		<view class="page-width">
			<app-search-for :placeholder="placeholder" :value="value" isemit @tosearch="tosearch"></app-search-for>
		</view>
		<!-- 轮播 -->
		<view class="" v-if="banners.length > 0">
			<app-swiper :list="banners" borderRadius="0" mode="rect" name="icon_url" :height="264" :autoplay="true">
			</app-swiper>
		</view>
		<!-- 一行四个半 nextMargin="80rpx" -->
		<view class="" v-if="navs && navs.length > 0 && (zhilve == 0 || zhilve == 3)">
			<!-- 226-28 160-198  136-174 -->
			<app-navigation-icon navHeight="174" navMargin="20rpx auto 0" iconRadius="0" :navs="navs"
				background="#f7f7f7" :scroll="true" columns="5" :imgStyle="imgstyle2" :rows="1">
			</app-navigation-icon>
			<view class="climore" @click="jump(navsurl)">
				点击进入>>>
			</view>
		</view>
		<!-- 两行四个半 nextMargin="80rpx"  160-206  136-182 -->
		<view class="" v-if="navs && navs.length > 0 && (zhilve == 2 || zhilve == 1)">
			<!-- 226-20 -->
			<app-navigation-icon navHeight="182" navMargin="20rpx auto 0" iconRadius="0" :navs="navs"
				background="#f7f7f7" :scroll="true" columns="5" :imgStyle="imgstyle2" :rows="2">
			</app-navigation-icon>
			<view class="climore" @click="jump(navsurl)">
				点击进入>>>
			</view>
		</view>
		<view class="dir-left-nowrap cross-top onetop" v-if="snavs1 != '' && snavs1.subnav.length > 0">
			<view class="left-ti dir-left-nowrap cross-center main-center">
				<!-- <view class="allti oneti u-line-2">{{snavs1.name}}</view>
				<image class="wholeimg" :src="snavs1.icon_url" mode="aspectFit"></image> -->
				<image class="img" :src="snavs1.icon_url" mode="aspectFit"></image>
			</view>
			<!-- 148-28+28:isver 480->652 -->
			<view class="rightie">
				<app-navigation-icon :isver="true" :istext="false" :isShow="false" allwidth="652" nextMargin="120rpx"
					:autoplay="false" navHeight="164" navMargin="0 auto" :navs="snavs1.subnav" background="#F7F7F7"
					itembackground="#FFFFFF" textwidth="96rpx" :scroll="true" :columns="2" :imgStyle="imgstyle1"
					:rows="1">
				</app-navigation-icon>
			</view>
		</view>
		<view v-if="navsone.length > 0">
			<view class="righti" style="width: 726rpx;">
				<!-- 270-28 -->
				<app-navigation-icon :isShow="false" allwidth="726" nextMargin="90rpx" :autoplay="false" navHeight="242"
					navMargin="0 auto" :navs="navsone" background="#FFFFFF" itembackground="#FFFFFF" :scroll="true"
					:columns="3" :imgStyle="imgstyle3" :rows="1">
				</app-navigation-icon>
			</view>
		</view>
		<view class="">
			<view class="box" v-if="zhilve == 0 && snavs == 1">
				<view v-if="list.length" class="list-box">
					<view class="item" v-for="(item, index) in list" :key="index" @click="tozhibo(item)">
						<view class="anchor-img-box">
							<image mode="aspectFill" class="anchor-img" :src="item.anchor_img"></image>
							<image v-if="item.live_status === 103" class="play-icon" src="/static/image/video-play.png">
							</image>
						</view>
						<view class="room-info-box">
							<view class="name">{{item.name}}</view>
							<view class="user-info-box">
								<image mode="aspectFill" class="anchor-img" :src="item.anchor_img"></image>
								<span class="anchor-name">{{item.anchor_name}}</span>
							</view>
						</view>
						<view v-if="item.live_status === 101" class="tag-box tag-box-3">
							<view class="text">
								<image class="live-icon" src="/static/image/icon/liveing.png"></image>
								<span>{{item.status_text}}</span>
							</view>
						</view>
						<!--预告-->
						<view v-else-if="item.live_status === 102" class="tag-box tag-box-1">
							<view class="text">
								<view class="round"></view>
								<span>{{item.status_text}}</span>
							</view>
							<view class="text-time">{{item.text_time}}</view>
						</view>
						<view v-else-if="item.live_status === 103" class="tag-box tag-box-2">
							<view class="text">
								<view class="round"></view>
								<span>{{item.status_text}}</span>
							</view>
						</view>
						<view v-else class="tag-box tag-box-3">
							<view class="text">
								<view class="round"></view>
								<span>{{item.status_text}}</span>
							</view>
						</view>
					</view>
				</view>
				<view v-else class="empty-box">
					<image src="/static/image/order-empty.png"></image>
					<span>等待有惊喜哦~</span>
				</view>
			</view>
			<!-- 品类主播 -->
			<view class=""
				v-if="(zhilve == 2 && snavs == 1) || (zhilve == 1 && snavs == 1) || (zhilve == 0 && snavs == 2) || (zhilve == 3 && snavs == 2) || (zhilve == 7 && snavs == 2) || snavs == 5">
				<u-indexware :value="list"></u-indexware>
				<!-- <view class="list-one">
					<view class="list-one-item" v-for="(child,childindex) in list" :key="childindex"
						@click="jump(child.url)">
						<image class="image" :src="child.icon_url" mode="aspectFill"></image>
						<text class="u-line-2">{{child.name}}</text>
					</view>
				</view> -->
			</view>
			<!-- 好货快快抢 好货视频 -->
			<view class="list-one" v-if="zhilve == 3 && snavs == 1">
				<view class="list-one-item" v-for="(item,index) in list" :key="index" @click="tolist(item)">
					<view class="live-image">
						<image class="image" :src="item.cover_img || item.pic_url || item.icon_url" mode="aspectFill">
						</image>
						<!-- <view v-if="item.live_status === 101" class="tag-box tag-box-3">
							<view class="text">
								<image class="live-icon" src="/static/image/icon/liveing.png"></image>
								<span>{{item.status_text}}</span>
							</view>
						</view> -->
						<!--预告-->
						<view v-if="item.status == 1" class="tag-box tag-box-1">
							<view class="text">
								<view class="round"></view>
								<span>抢货预告</span>
							</view>
							<view class="text-time">{{item.start_at}}-{{item.end_at}}</view>
						</view>
						<view v-else-if="item.status == 2" class="tag-box tag-box-2">
							<view class="text">
								<view class="round"></view>
								<span>正在抢货</span>
							</view>
						</view>
						<view v-else class="tag-box tag-box-3">
							<view class="text">
								<view class="round"></view>
								<span>珠宝介绍回放</span>
							</view>
						</view>
					</view>
					<view class="u-line-2">
						{{item.title}}
					</view>
				</view>
			</view>
			<!-- 实体店列表 -->
			<view class="list-one" v-if="snavs == 3">
				<!-- <u-indexware :value="list"></u-indexware> -->
				<view class="list-one-item" v-for="(item,index) in list" :key="index" @click="routeGo(item.id)">
					<image class="image" :src="item.icon_url" mode=""></image>
					<text class="u-line-2 one-title">{{item.name}}</text>
				</view>
			</view>
		</view>
		<!-- <view class="">
			<u-gospeed-ware :value="videolist" @click="topage"></u-gospeed-ware>
		</view> -->
	</view>
</template>

<script>
	import appSearchFor from '../../components/page-component/app-search-for/app-search-for.vue'
	import appNavigationIcon from '../../components/page-component/app-navigation-icon/app-navigation-icon.vue'
	import appSwiper from '../../components/page-component/app-swiper/app-swiper.vue'
	import uGospeedWare from '../../components/page-component/u-goods-list/u-gospeed-ware.vue';
	import uIndexware from '../../components/page-component/u-goods-list/u-indexware.vue';
	let loadcom = false
	export default {
		data() {
			return {
				value: {
					background: `#F7F7F7`,
					color: '#FFFFFF',
					placeholder: '搜索',
					radius: 15,
					textColor: '#c0c0c0',
					textPosition: `center`,
					shadow: `0 16rpx 32rpx rgba(0, 0, 0, 0.1);`
				},
				placeholder: '搜索',
				banners: [],
				// 最新
				snavs1: [],
				navs: [],
				navsurl: '',
				navsone: [],
				// 
				list: [],
				livelist: [],
				// 实体店列表
				entlist: [],
				// imgstyle2: "width: 160rpx;height: 160rpx",
				imgstyle2: "width: 136rpx;height: 136rpx",
				imgstyle1: "width: 231rpx;height: 164rpx",
				imgstyle3: "width: 180rpx;height: 180rpx",
				videolist: [],
				page: 1,
				limit: 4,
				page_count: 1,
				total_count: 1,

				zhilve: 0,
				snavs: 1,
				cateid: 2420,
				backid: 0,
				// 主播、实体店
				catid: 1
			}
		},
		components: {
			appSearchFor,
			appNavigationIcon,
			uGospeedWare,
			appSwiper,
			uIndexware
		},
		onLoad(options) {
			this.zhilve = options.zhilve || 0
			this.backid = options.backid || 0
			this.snavs = options.snavs || 1
			this.cateid = options.cateid || 2420
			this.catid = options.catid || 1
			if (this.zhilve == 0) { // 直播
				this.placeholder = '搜索实体店'
				if (this.snavs == 1) {
					this.allReq(213)
					// this.allReq(214)
					this.navsReq(46)
					this.getList()
				} else if (this.snavs == 2) {
					this.allReq(this.cateid)
				}
			} else if (this.zhilve == 1) { // 主播
				this.placeholder = '搜索主播'
				if (this.snavs == 1) {
					this.allReq(this.cateid)
				}
			} else if (this.zhilve == 2) { // 品类主播
				this.placeholder = '搜索品类主播'
				this.allReq(212)
				this.allReq(this.cateid)
			} else if (this.zhilve == 3) { // 好货快快抢
				this.placeholder = '搜索好货快快抢视频'
				if (this.snavs == 1) {
					this.appPort()
				} else if (this.snavs == 2) {
					this.allReq(this.cateid)
				}
			} else if (this.zhilve == 7) { // 子品牌
				this.placeholder = '搜索子品牌'
				if (this.snavs == 2) {
					this.allReq(this.cateid)
				}
			}
			if (this.snavs == 3) {
				this.loadentlist(this.catid)
			}
			if (this.snavs == 5) {
				this.allReq(this.cateid)
			}
		},
		onReachBottom() {
			if (this.page < this.page_count) {
				this.page++
				if (this.zhilve == 0) { // 直播
					if (this.snavs == 1) {
						this.getList()
					}
				} else if (this.zhilve == 1) { // 主播
					this.allReq(this.cateid)
				} else if (this.zhilve == 2) { // 品类主播
					this.allReq(this.cateid)
				} else if (this.zhilve == 3) { // 好货快快抢
					if (this.snavs == 1) {
						this.appPort()
					}
				} else if (this.zhilve == 7) { // 子品牌
					this.allReq(this.cateid)
				}
				if (this.snavs == 3) {
					this.loadentlist(this.catid)
				}
			}
		},
		methods: {
			tosearch() {
				uni.navigateTo({
					url: '/pages/gospeed/search?zhilive=' + this.zhilve
				})
			},
			jump(item) {
				if (item == '/' || item == 'javascript:;' || item == '') {
					return
				}
				if (item.indexOf('/pages/gospeed/index') != -1 || item == '/pages/index/index' || item ==
					'/pages/sixty/index' || item == '/pages/user-center/user-center' || item == '/pages/store/mine/mine') {
					uni.reLaunch({
						url: item
					})
					return
				}
				uni.navigateTo({
					url: item
				})
			},
			allReq(pid) {
				let pdata = {
					pid: pid,
					status: 1,
					limit: 200
				}
				if (pid == this.cateid) {
					pdata = {
						pid: pid,
						status: 1,
						page: this.page,
						limit: 10
					}
				}
				this.$request({
					url: this.$api.navs.list,
					data: pdata
				}).then((res) => {
					if (res.code == 0) {
						if (this.zhilve == 2) {
							if (pid == 212) {
								this.navs = res.data.list
							}
							if (pid == 213) {
								this.banners = res.data.list
							}
							// if (pid == 214) {
							// 	this.snavs1 = res.data.list
							// }
						}
						if (pid == this.cateid) {
							this.page_count = res.data.pagination.page_count;
							this.list = this.list.concat(res.data.list)
						}
					}
				}).catch(() => {

				})
			},
			navsReq(id) {
				this.$request({
					url: this.$api.navs.index,
					data: {
						id: id
					}
				}).then((res) => {
					if (res.code === 0) {
						if (id == 46) {
							this.snavs1 = res.data.list[214]
						}
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				}).catch(() => {

				})
			},
			topage(item) {
				let url = '/pages/goods/vi?id=' + item.id
				if (this.available) {
					url = '/pages/goods/vi?id=' + item.id + '&available=true'
					if (this.goldsnum) {
						url = '/pages/goods/vi?id=' + item.id + '&available=true&goldsnum=' + this.goldsnum
					}
				}
				if (item.url == '/pages/bepartner/index') {
					if (this.userInfo.vdian_id != null) {
						this.appStatus(this.userInfo.vdian_id)
						return;
					}
				}
				if (item.content != undefined) {
					if (item.status != 1) {
						uni.navigateTo({
							url: url
						})
					}
				} else {
					uni.navigateTo({
						url: item.url
					})
				}
			},
			// 实体店列表
			loadentlist(catid) {
				this.$request({
					url: this.$api.entity.list,
					data: {
						page: this.page,
						limit: 10,
						formdata: {
							// district_id: 0,
							// user_id: 0,
							catid: catid
						}
					}
				}).then((res) => {
					// console.log(res);
					this.entlist = this.entlist.concat(res.data.list)
					this.entlist.forEach(item => {
						if (item.malloption.option1.cateinfo.length > 0) {
							if (this.backid == 0) {
								// item.cover_img = item.malloption.option1.cateinfo[0].icon_url
								item.icon_url = item.malloption.option1.cateinfo[0].icon_url
							} else if (this.backid == 1) {
								item.icon_url = item.malloption.option1.cateinfo[1].icon_url
							} else if (this.backid == 2) {
								item.icon_url = item.malloption.option1.cateinfo[2].icon_url
							} else if (this.backid == 3) {
								item.icon_url = item.malloption.option1.cateinfo[3].icon_url
							}
						} else {
							item.icon_url = ''
						}
					})
					this.list = this.entlist
					this.page_count = res.data.pagination.page_count
				}).catch(err => {
					// console.log(err);
				})
			},
			routeGo(mall_id) {
				uni.navigateTo({
					url: '/pages/entity/index?mall_id=' + mall_id
				});
			},
			// 好货快快抢
			async appPort() {
				// 9.9修
				loadcom = false
				const res = await this.$request({
					url: this.$api.navs.mersq,
					data: {
						page: this.page,
						status: 1,
						limit: 10,
						// 10.27 添加好货快抢的标识
						pid: 1
					}
				});
				if (res.code === 0) {
					loadcom = true
					let listvideo = []
					let status = ''
					this.page_count = res.data.pagination.page_count;
					this.total_count = res.data.pagination.total_count;
					listvideo = res.data.list
					listvideo = listvideo.filter(response => {
						let nes = response
						status = this.listJump(nes.id, nes.goodslist, nes.start_at, nes.end_at)
						nes.start_at = nes.start_at.substr(11, 5)
						nes.end_at = nes.end_at.substr(11, 5)
						this.$set(nes, 'status', status);
						this.$set(nes, 'start_at', nes.start_at);
						this.$set(nes, 'end_at', nes.end_at);
						return nes
					})
					// console.log(listvideo);
					this.videolist = this.videolist.concat(listvideo)
					this.list = this.videolist
					uni.stopPullDownRefresh()
				} else {
					uni.stopPullDownRefresh()
					uni.showModal({
						title: '提示',
						content: res.msg,
					})
				}
			},
			listJump(id, list, stime, etime) {
				// 当前时间
				let catime = new Date()
				// 开始时间
				let satime = new Date(stime.replaceAll('-', '/'))
				// 结束时间
				let eatime = new Date(etime.replaceAll('-', '/'))
				if (satime > catime) {
					this.sup_status = 1
				} else if (satime <= catime && catime < eatime) {
					let salist = []
					salist = list.filter((itm, index) => {
						return itm.goods_stock != 0
					})
					if (salist.length == 0) {
						this.sup_status = 3
					} else {
						this.sup_status = 2
					}
				} else if (catime >= eatime) {
					this.sup_status = 3
				}
				return this.sup_status
				// return this.sup_status
			},
			tolist(item) {
				let url = '/pages/goods/vi?id=' + item.id
				if (this.available) {
					url = '/pages/goods/vi?id=' + item.id + '&available=true'
					if (this.goldsnum) {
						url = '/pages/goods/vi?id=' + item.id + '&available=true&goldsnum=' + this.goldsnum
					}
				}
				if (item.status != 1) {
					uni.navigateTo({
						url: url
					})
				}
			},
			// 直播列表
			getList() {
				let self = this;
				if (!self.is_show_load) {
					self.$showLoading({
						text: '加载中...'
					});
				}
				self.$request({
					url: self.$api.live.index,
					data: {
						page: self.page,
					},
				}).then(response => {
					self.$hideLoading();
					if (response.code === 0) {
						let {
							list
						} = response.data;
						if (self.page != 1) {
							self.livelist = self.livelist.concat(list)
						} else {
							self.livelist = list;
						}
						if (self.zhilve == 0) {
							self.list = self.livelist
							self.page_count = response.data.pageCount
						}
					} else {
						uni.showToast({
							title: response.msg,
							icon: 'none',
							duration: 1000,
						});
					}
				}).catch(() => {
					self.is_show_load = false;
					self.$hideLoading();
				});
			},
			tozhibo(item) {
				let self = this;
				let userId = this.userInfo ? this.userInfo.options.user_id : 0;
				let customParams = {
					user_id: userId
				}; // 开发者在直播间页面路径上携带自定义参数
				uni.navigateTo({
					url: `plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=${item.roomid}&custom_params=${encodeURIComponent(JSON.stringify(customParams))}`
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.onetop {
		width: 726rpx;
		margin: 28rpx auto;
	}

	.rightie {
		// width: 584rpx;
		width: 652rpx;
	}

	.left-ti {
		/* width: 130rpx;
		height: 148rpx; */
		width: 62rpx;
		height: 164rpx;
		position: relative;
		background-color: #fff;
		margin: 0 12rpx 0 0;

		.img {
			width: 62rpx;
			height: 164rpx;
		}

		.allti {
			font-size: 30rpx;
			font-weight: bold;
			text-align: center;
		}

		.oneti {
			color: #000000;
			// line-height: 148rpx;
		}

		.twoti {
			color: #2a29da;
		}

		.thrti {
			text-align: center;
			color: #a96536;
		}

		.wholeimg {
			width: 60rpx;
			height: 42rpx;
			position: absolute;
			top: -21rpx;
			left: 50%;
			transform: translateX(-50%);
		}

		.material {
			margin-top: 12rpx;
			font-size: 25rpx;
			color: #d1d1d1;
		}
	}

	// 直播
	.list-box {
		padding: 20#{rpx};
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;

		.item {
			width: 346#{rpx};
			border-radius: 16#{rpx};
			box-shadow: 0 0 10#{rpx} 1#{rpx} rgba(0, 0, 0, 0.1);
			margin-bottom: 20#{rpx};
			position: relative;
			background: #ffffff;

			.tag-box {
				position: absolute;
				top: 0;
				left: 0;
				display: flex;
			}

			.tag-box-1 {
				.text {
					background: #22ac38;
				}

				.text-time {
					padding: 12#{rpx} 20#{rpx};
					font-size: 24#{rpx};
					color: #fff;
					background: rgba(0, 0, 0, 0.5);
					margin-left: -20rpx;
					border-bottom-right-radius: 30#{rpx};
					border-top-right-radius: 30#{rpx};
					padding-left: 30#{rpx};
				}
			}

			.tag-box-2 {
				.text {
					background: #777777;
				}
			}

			.tag-box-3 {
				.text {
					background: #ff4544;
				}

				.live-icon {
					width: 24#{rpx};
					height: 24#{rpx};
					margin-right: 12#{rpx};
				}
			}

			.round {
				width: 15#{rpx};
				height: 15#{rpx};
				background: #fff;
				border-radius: 50%;
				margin-right: 12#{rpx};

			}

			.text {
				padding: 12#{rpx} 20#{rpx};
				font-size: 26#{rpx};
				border-top-left-radius: 16#{rpx};
				border-top-right-radius: 30#{rpx};
				border-bottom-right-radius: 30#{rpx};
				z-index: 10;
				color: #fff;
				display: flex;
				align-items: center;

			}

			.anchor-img-box {
				width: 346#{rpx};
				height: 346#{rpx};
				border-radius: 16#{rpx};
				position: relative;
				overflow: hidden;

				.anchor-img {
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
				}

				.play-icon {
					width: 100#{rpx};
					height: 100#{rpx};
					position: absolute;
					top: 123#{rpx};
					left: 123#{rpx};

				}

				.subscribe-box {
					position: absolute;
					top: 153#{rpx};
					left: 53#{rpx};
				}
			}

			.room-info-box {
				padding: 15#{rpx} 28#{rpx};

				.name {
					font-size: 28#{rpx};
					color: #353535;
					white-space: nowrap;
					-ms-text-overflow: ellipsis;
					text-overflow: ellipsis;
					overflow: hidden;
				}

				.user-info-box {
					display: flex;
					align-items: center;
					margin-top: 12#{rpx};

					.anchor-img {
						width: 40#{rpx};
						height: 40#{rpx};
						-webkit-border-radius: 50%;
						-moz-border-radius: 50%;
						border-radius: 50%;
					}

					.anchor-name {
						width: 200#{rpx};
						font-size: 24#{rpx};
						color: #999999;
						margin-left: 12#{rpx};
						white-space: nowrap;
						-ms-text-overflow: ellipsis;
						text-overflow: ellipsis;
						overflow: hidden;
					}
				}
			}
		}
	}

	.empty-box {
		width: 100%;
		height: 100vh;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;

		image {
			width: 280#{rpx};
			height: 280#{rpx};
		}

		span {
			margin-top: 15#{rpx};
			color: #999;
			font-size: 28#{rpx};
		}
	}

	.morelive {
		flex: 1;
		padding: 24rpx 12rpx;
		display: flex;
		justify-content: space-between;

		// background-color: #FFF;
		.morelive-item {
			padding: 24rpx 12rpx;
			margin: 24rpx 0;
			background-color: #ffffff;
			border-radius: 16rpx;
		}

		.live-commodity {
			font-size: 36rpx;
			font-weight: 600;
			width: 120rpx;
			margin-left: 24rpx;

			.live-img {
				width: 120rpx;
				height: 120rpx;
			}

			.price {
				text-align: center;
			}
		}

		.more-discount {
			font-size: 28rpx;
			font-weight: 600;
			margin-top: 120rpx;
		}
	}

	.list-one {
		width: 720rpx;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;

		.list-one-item {
			width: 350rpx;
			height: 470rpx;
			font-size: 28rpx;

			.image {
				width: 350rpx;
				height: 360rpx;
			}
		}
	}

	.live-image {
		position: relative;

		.live-img {
			width: 351rpx;
		}

		.tag-box {
			position: absolute;
			top: 0;
			left: 0;
			display: flex;
		}

		.tag-box-1 {
			.text {
				background: #22ac38;
			}

			.text-time {
				padding: 12#{rpx} 20#{rpx};
				font-size: 24#{rpx};
				color: #fff;
				background: rgba(0, 0, 0, 0.5);
				margin-left: -20rpx;
				border-bottom-right-radius: 30#{rpx};
				border-top-right-radius: 30#{rpx};
				padding-left: 30#{rpx};
			}
		}

		.tag-box-2 {
			.text {
				background: #777777;
			}
		}

		.tag-box-3 {
			.text {
				background: #ff4544;
			}

			.live-icon {
				width: 24#{rpx};
				height: 24#{rpx};
				margin-right: 12#{rpx};
			}
		}

		.round {
			width: 15#{rpx};
			height: 15#{rpx};
			background: #fff;
			border-radius: 50%;
			margin-right: 12#{rpx};
		}

		.text {
			padding: 4rpx 16rpx;
			font-size: 26#{rpx};
			// border-top-left-radius: 16#{rpx};
			border-top-right-radius: 30#{rpx};
			border-bottom-right-radius: 30#{rpx};
			z-index: 10;
			color: #fff;
			display: flex;
			align-items: center;
		}
	}

	.climore {
		width: 726rpx;
		// margin: 0 auto 32rpx;
		// padding: 32rpx 12rpx 20rpx;
		font-size: 26rpx;
		font-weight: bold;
		text-align: right;
		border-radius: 0 0 24rpx 24rpx;

		&.backcolor {
			background-color: #FFFFFF;
		}
	}
</style>
